import { Form, Input, message, Modal, Spin, Tag } from "antd"
import { FormInstance } from "rc-field-form"
import { createRef, useEffect, useState } from "react"
import { addCategoryAPI, getCategoryAPI } from "../../api"
import { ICategory } from "../../interface"


interface CategoryCommitProps {
    show: boolean
    closeFunc: (isCommit: boolean) => void
}


const CategoryCommit: React.FC<CategoryCommitProps> = ({ show, closeFunc }) => {

    const [form] = Form.useForm();

    const [loading, setLoading] = useState(false);
    const [category, setCategory] = useState<ICategory[]>([]);
    const [formData, setFormData] = useState({
        category_name: ''
    });
    
    useEffect(() => {
        getCategory();
    }, []);

    const handleOk = () => {
        // 提交添加
        form.validateFields()
        .then(val => {
            // 整理参数
            // console.log(val.category_name)
            // console.log(account_type)
            // console.log(account_id, account_type, category_id, amount, date_time, notes)
            addCategory(val.category_name);
        })
    }
    // 添加分类
    const addCategory = (category_name: string) => {
        setLoading(true);
        addCategoryAPI(category_name)
        .then(res => {
            // console.log(res)
            if (res.data.code !== 0) {
                throw new Error(res.data.message)
            }
            // setFormData({category_name: ''});
            closeFunc(true);
            message.success('添加成功');
        })
        .catch(e => {
            console.log(e)
            message.error(e.message)
        })
        .finally(() => {
            setLoading(false);
        });
    }
    // 
    const getCategory = () => {
        setLoading(true);
        getCategoryAPI()
        .then(res => {
            // console.log(res)
            if (res.data.code === 0) {
                setCategory(res.data.data)
            } else {
                throw new Error(res.data.message);
            }
        })
        .catch(e => {
            console.log('category获取发生错误')
            console.log(e)
            message.error(e.message);
        })
        .finally(() => {
            setLoading(false);
        });
    }


    return (
        <Modal
            closable={false}
            maskClosable={false}
            destroyOnClose={true}
            visible={show} 
            onOk={handleOk} 
            onCancel={() => closeFunc(true)}
        >
            {
                loading ? 
                    <Spin className="loading" /> : ''
            }
            <Form
                labelCol={{span: 4}}
                form={form}
				initialValues={formData}
                scrollToFirstError={true}
                validateTrigger={['onBlur', 'onChange']}
            >
                <Form.Item name="category_name" hasFeedback label="分类" rules={[
                    { required: true, message: '请输入分类名称', type: 'string' }
                ]}>
                    <Input style={{ width: '100%' }} onKeyDown={e => {
                        if (e.key === 'Enter') {
                            handleOk();
                        }
                    }} />
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default CategoryCommit;

